<template>
  <div id="slidMenu">
    <el-scrollbar
      ref="myScrollbar"
      wrap-class="scrollbar-wrapper"
      style="height:100%"
    >
      <el-menu
        class="el-menu-vertical-demo"
        :default-active="defaultActive"
        :unique-opened="true"
        :collapse-transition="false"
        :collapse="isCollapse"
        mode="vertical"
        router
        background-color="#eff2f8"
        active-text-color="#16d8b1"
      >
        <menuItem
          v-for="item in menuData"
          :key="item.menuId"
          :item="item"
        ></menuItem>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import menuItem from '@common/menuItem'

export default {
  name: 'SlidMenu',
  msg: '左侧菜单',
  components: {
    menuItem
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      menuData: []
    }
  },
  computed: {
    defaultActive() {
      let idStr = '#'
      if (this.$route.query.mId) {
        idStr = this.$route.query.mId.toString()
      }
      return idStr
    }
  },
  mounted() {
    this.getMenu()
  },
  methods: {
    /* 获取菜单 */
    getMenu() {
      let url = '/menus/curr-user'
      this.pubRequire('get', url, '', (response) => {
        this.menuData = [...response]
      })
    }
  }
}
</script>

<style lang="less">
#enter .slid-con {
  z-index: 1500;
  width: 200px !important;
  background: rgba(239, 242, 248, 1);
}

#enter .slid-con .el-menu-item.is-active {
  background: #e5e8ec !important;
  // line-height: 12px;
}
#slidMenu {
  .el-menu-item {
    i {
      margin-right: 8px;
    }
  }
}
</style>
